<template>
  <div class="app-container">
    <h2 class="con-title">库存导入记录</h2>
    <div class="btn-box">
    </div>
    <div class="source">
      <div class="input-line">
        <div class="input-inline">
          <label class="input-label">文件名称：</label>
          <div class="el-input" style="width:180px">
            <input type="text" autocomplete="off" placeholder="请输入内容" class="el-input__inner" v-model="listQuery.fileName">
          </div>
        </div>
        <div class="input-inline">
          <label class="input-label">上传时间：</label>
          <div class="el-input" style="width:180px">
            <el-date-picker v-model="listQuery.startDate" type="date" placeholder="选择日期" :picker-options="pickerOptions1" value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
          <div class="form-mid">-</div>
          <div class="el-input" style="width:180px">
            <el-date-picker v-model="endDate" type="date" placeholder="选择日期" :picker-options="pickerOptions2" value-format="timestamp">
            </el-date-picker>
          </div>
        </div>
      </div>
      <el-button type="primary" icon="el-icon-search" style="position: absolute;top:20px;right:20px;" size="small" @click="searchSubmit">搜索</el-button>
    </div>
    <el-table :data="list" ref="tableData" v-loading.body="listLoading" stripe element-loading-text="Loading" border highlight-current-row>
      <el-table-column align="center" label='文件名称'>
        <template slot-scope="scope">
          {{scope.row.fileName}}
        </template>
      </el-table-column>
      <el-table-column label="导入商品总量" align="center">
        <template slot-scope="scope">
          {{scope.row.fileTotal}}
        </template>
      </el-table-column>
      <el-table-column label="导入成功数" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.fileSuccess}}</span>
        </template>
      </el-table-column>
      <el-table-column label="导入失败数" align="center">
        <template slot-scope="scope">
          {{scope.row.fileError}}
        </template>
      </el-table-column>
      <el-table-column align="center" label='上传时间'>
        <template slot-scope="scope" v-if="scope.row.createDate!=null">
          <!--<i class="el-icon-time"></i>-->
          {{scope.row.createDate| formatDate( 'yyyy-MM-dd hh:mm')}}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <router-link :to="{ path: 'failRecord', query: { filesId: scope.row.id }}">
            <el-button type="text" size="small">导入失败详情</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageIndex" :page-sizes="[10, 20, 30, 40]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {
  getStockRecordList
} from '@/api/list'

export default {
  data() {
    return {
      currentPage4: 1,
      total: 100,
      listQuery: {
        pageIndex: 1,
        pageSize: 20,
        fileName: '',
        startDate: '',
        endDate: ''
      },
      endDate: '',
      list: null,
      listLoading: true,
      downloadLoading: false,
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions2: {
        disabledDate: (time) => {
          return time.getTime() < this.value1
        }
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 列表加载
    fetchData() {
      // 结束日期加一天
      if (this.endDate !== '') {
        const date = new Date(this.endDate)
        // 加一天
        const time = date.setDate(date.getDate() + 1)
        // 使用filters 里使用
        this.listQuery.endDate = this.$options.filters.formatDate(time, 'yyyy-MM-dd')
      }
      this.listLoading = true
      getStockRecordList(this.listQuery).then(res => {
        this.list = res.data.stockRecordList
        this.total = res.data.total
        this.listLoading = false
      })
    },
    searchSubmit() {
      this.listQuery.pageIndex = 1
      this.fetchData()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.listQuery.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listQuery.pageIndex = val
      this.fetchData()
    }
  }
}

</script>
<style rel="stylesheet/scss" lang="scss">
@import 'src/assets/css/jx-order.scss';
</style>
